<template>
  <div>
    {{data.age}}
    {{data.name}}
    {{data.arr}}
    {{data.obj}}
    {{data.obj.age}}
    {{name}},
    {{arr}}
  </div>
</template>

<script>
import { defineComponent, reactive, toRefs } from 'vue'
export default defineComponent({
  name: 'DefData', // 组件名称
  // 注意：vue3.0中，没有this
  setup (props, ctx) {
    let data = reactive({
      name: 'Jack',
      age: 20,
      arr: ['a', 'b', 'c', 'd'],
      obj: {
        username: 'Zhang',
        age: 20
      }
    })
    // 注意：定义好的变量、方法一定要返回出去
    return {
      // 页面上访问数据时，需要加上前缀data
      data,
      // 使用toRefs可以把数据解构出来，在页面上不用加上前缀
      // 注意：解构出来的名字，不能与外部变量的名字重复
      ...toRefs(data)
    }
  }
})
</script>

<style lang="scss" scoped>
</style>